<template>
  <div class="box">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <h3><div class="logo">后台管理首页</div></h3>
        <div><el-button type="info" @click="logout">退出</el-button></div>
      </el-header>

      <el-container>
        <!-- 侧边 -->
        <el-aside class="open" id="aside">
          <p class="zhe" @click="chengzhe">|||</p>
          <el-menu
            default-active="/admin1/index"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse="iscollapse"
            router
          >
            <el-menu-item index="/admin1/index">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin1/list">用户列表</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="/admin1/power">权限列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin1/shoplist">商品列表</el-menu-item>
                <el-menu-item index="/admin1/goods">商品列表11</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <!-- 管理后台页面切换 -->
          <div class="yhn">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数
  props: [], 
  components: {}, 
  data() {
    return {
      iscollapse: false,
    };
  }, // 计算属性
  computed: {}, // 侦听器
  watch: {}, // 组件方法
  methods: {
    logout() {
      this.$confirm("确定要退出？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除本地的token值
          this.$message.success("退出成功");
          sessionStorage.getItem("03B_token");
          //退出到登录页面
          this.$router.push("/admin1/logina");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    chengzhe() {
      //内部菜单的折叠
      this.iscollapse = !this.iscollapse;
      //aside外层菜单的折叠
      if (this.iscollapse == false) {
        //open的样式
        aside.className = "el-aside open";
      } else {
        // close的样式
        aside.className = "el-aside close";
      }
    },
  }, 
  created() {},
  mounted() {},
  updated() {},
};
</script> 

<style lang="scss" scoped>
.el-container {
  width: 100%;
  .el-header {
    width: 100%;
    background: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.el-aside {
  min-height: 800px;
  background: #545454;
  transition: width 1s ease;
}
.el-menu {
  border-right: none;
}
.zhe {
  line-height: 40px;
  color: white;
  text-align: center;
}
.open {
  width: 200px !important;
}
.close {
  width: 64px !important;
}
.el-main {
  background: #f0f0f0;
  .yhn {
    background: white;
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
  }
}
</style>
